<template>
	<view class="content openWz-container">
		<view class="title">领取我的工作证</view>
		<view class="tip f-24">申领前需认证开通居民身份网络可信凭证（CTID）</view>
		<view class="tip f-24">领证有效期至：{{cardDetail.send_code_ts || '-'}}</view>
		<view class="input-box">
			<view class="uni-form-item uni-column">
				<view class="label flexbox flexbox-middle">姓名：</view>
				<view class="uni-input-box">
					<!-- <view v-if="userinfo.role === 'user'" @click="goAuth" class="input-btn flexbox flexbox-middle">实名认证，开通网证 >></view> -->
					<view class="uni-input flexbox flexbox-middle">{{cardDetail.nick_name}}<!-- <image class="auth-icon" src="/static/images/auth_icon.png"></image> --></view>
				</view>
			</view>
			
			<view v-if="cardDetail.card_key_one" class="uni-form-item uni-column">
				<view class="label flexbox flexbox-middle">{{cardDetail.card_key_one || '-'}}：</view>
				<input class="uni-input" @input="onKeyInput" disabled v-model="formData.card_content_one" type="text" :placeholder="'请输入' + (cardDetail.card_key_one || '')" />
			</view>
			
			<view v-if="cardDetail.card_key_two" class="uni-form-item uni-column">
				<view class="label flexbox flexbox-middle">{{cardDetail.card_key_two || '-'}}：</view>
				<input class="uni-input" @input="onKeyInput"  disabled type="text" v-model="formData.card_content_two" :placeholder="'请输入' + (cardDetail.card_key_two || '')" />
			</view>
			
			<view v-if="cardDetail.card_key_three" class="uni-form-item uni-column">
				<view class="label flexbox flexbox-middle">{{cardDetail.card_key_three || '-'}}：</view>
				<input class="uni-input" @input="onKeyInput"  disabled  v-model="formData.card_content_three" :placeholder="'请输入' + (cardDetail.card_key_three || '')" />
			</view>
		</view>
		
		<view class="card-box">
			<view @click="handlePreview" class="workcard-box">
				<workcard  :scale="true" :data="cardDetail"/>
			</view>
			
			<view @click="handlePreview" class="preview-btn f-24">点击查看大图</view>
			<view  @click="goGX()" class="company f-24">{{cardDetail.company_name}}</view>
		</view>

		<view class="open-btn flexbox flexbox-middle flexbox-center f-32" :class="{'disabled':!activeFlag}" @click="handleSubmit">领取</view>
		
		<view v-show="previewFlag" class="alert" catchtouchmove="false"></view>
		<view v-show="previewFlag" class="preview-card" catchtouchmove="false">
			<workcard :data="cardDetail"/>
			<view class="flexbox flexbox-middle flexbox-center"><image @click="close" class="close-icon" src="/static/images/close_png.png"></image></view>
		</view>
		<!-- <login-alert @loginSuccess="loginSuccess"/> -->
	</view>

</template>

<script>
	import workcard from '@/components/workcard/index.vue'
	import { phoneLogin, getURLParamInfo } from '@/static/js/utils.js'
	import loginAlert from '@/components/loginAlert/index.vue'
	export default {
		components:{
			workcard,
			loginAlert
		},
		data() {
			return {
				previewFlag: false,
				id: '',
				phone: '',
				activeFlag: true,
				formData: {
					card_content_one: '',
					card_content_two: '',
					card_content_three: ''
				},
				code: '',
				cardDetail: {},
				ifLogin: false,
				userinfo: {},
				flag: false
			}
		},
		onLoad: function(e) {
			this.id = e.id || '1'
			this.phone = e.phone
			let ctid = e.ctid || ''
			if (ctid) {
				uni.setStorageSync('ctid', ctid);
			}
			// 扫码进入获取参数
			if (e.q) {
				let strArray = decodeURIComponent(e.q)
				this.id = getURLParamInfo('id', strArray)
				this.phone = getURLParamInfo('phone', strArray)
			}
			this.getTemplate()
		},
		onShow() {
			if (uni.getStorageSync('authorization')) {
				this.ifLogin = true
				this.getInfos()
			} else {
				this.ifLogin = false
			}
		},
		methods: {
			getTemplate() {
				let param = {
					id: parseInt(this.id),
					phone: this.phone,
					noRedirectLogin: 1
				}
				this.$HTTP.post('/work_permit_card/specified_card_info', param, true).then((res) => {
					this.cardDetail = res.data
					 let {card_content_one, card_content_two, card_content_three} = res.data
					 this.formData.card_content_one = card_content_one
					 this.formData.card_content_two = card_content_two
					 this.formData.card_content_three = card_content_three
					 setTimeout(() => {
						 this.flag = true
					 }, 60)
				}).catch(err => {
					this.activeFlag = false
					this.flag = false
					if(err.code == '1010' || err.code == '1030') {
						setTimeout(() => {
							uni.reLaunch({
							    url: `/pages/index/index`
							});
						}, 2000)
					}
				})  
			},
			/**
			 * 跳转到公信
			 */
			goGX() {
				if (this.cardDetail.gx_company_id == '0'){
					return false
				}
				// 只有在h5编译
				//#ifdef H5
				  //window.location.href = 'https://m.gxzg.org.cn/detail/' + res.data.id
				//#endif
				
				// 只有在小程序编译
				//#ifdef MP
				// 跳转公信小程序
				 uni.navigateToMiniProgram({
				   appId: 'wx8369661ce0151897',
				   path: 'pages/companyDetail/index?id=' + this.cardDetail.gx_company_id,
				   extraData: {
				     'data1': 'test'
				   },
				   envVersion: 'trial',
				   success(res) {
				     // 打开成功
				   }
				 })
				//#endif
			},
			getInfos() {
				this.$HTTP.post('/wechat/userinfo', {noRedirectLogin: 1}, false).then((res) => {
					//console.log(res)
					this.userinfo = res.data
					if (res.role == 'user') {
						uni.redirectTo({
						    url: `/pages/openWz-step1/index?type=getCertificate&id=${this.id}&phone=${this.phone}`
						});
					}
				}).catch(err => {
					if(err.code == 4001) {
						uni.redirectTo({
							url: `/pages/login/index?rurl=${encodeURIComponent('/pages/getCertificate/index')}&type=getCertificate&id=${this.id}&phone=${this.phone}`
						});
					}
				}) 
			},
			onKeyInput() {
				/*if (this.formData.card_content_one && this.formData.card_content_two && this.formData.card_content_three) {
					this.activeFlag = true
				} else {
					this.activeFlag = false
				}*/
				this.cardDetail = Object.assign({}, this.cardDetail, this.formData);
			},
			getTo(url) {
				uni.navigateTo({
				    url: url
				});
			},
			goAuth() {
				if(!uni.getStorageSync('authorization')){
					uni.redirectTo({
						url: `/pages/login/index?rurl=${encodeURIComponent('/pages/getCertificate/index')}&type=getCertificate&id=${this.id}&phone=${this.phone}`
					});
					return false
				}
			},
			handlePreview() {
				this.previewFlag = true
			},
			close() {
				this.previewFlag = false
			},
			/*loginSuccess() {
				this.ifLogin = true
				this.getInfos()
				this.getTemplate()
			},*/
			
			handleSubmit(loginInfo) {
				/*if (!this.formData.card_content_one || !this.formData.card_content_two || !this.formData.card_content_three) {
					uni.showToast({
					    title: '请填写完整数据',
					    icon: 'none'
					})
					return false
				}*/
				if(!this.flag){return false}
				if(!uni.getStorageSync('authorization')){
					uni.redirectTo({
						url: `/pages/login/index?rurl=${encodeURIComponent('/pages/getCertificate/index')}&type=getCertificate&id=${this.id}&phone=${this.phone}`
					});
					return false
				}
				if(this.userinfo.role == 'user') {
					uni.redirectTo({
					    url: `/pages/openWz-step1/index?type=getCertificate&id=${this.id}&phone=${this.phone}`
					});
					return false
				}
				let param = Object.assign({}, {id: this.id,phone: this.phone}, this.formData);
				this.$HTTP.post('/work_permit_card/specified_card_recipients', param, true).then((res) => {
					// uni.setStorageSync('cer_id', res.data.id);
					uni.reLaunch({
					    url: `/pages/applyStatus/index?type=1&isGet=1`
					});
					this.flag = true
				}).catch(err => {
					this.flag = true
					uni.reLaunch({
					    url: `/pages/applyStatus/index?type=2&msg=${err.msg}&isGet=1`
					});
				})  
			}
		}


	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>